import React, {useImperativeHandle, forwardRef} from 'react';
import {Input,Form,Collapse,Col, Row } from "antd";
import style from "./propertiesPanel.module.scss"
import TextArea from "antd/es/input/TextArea";



const  ProcessPropertiesPanel =  forwardRef((props, ref) => {



    const [form] = Form.useForm()
    const [element, setElement] = React.useState(null);
    const [moder, setModer] = React.useState(null);
    const [id, setId] = React.useState(null);

// 暴露方法给父组件
    useImperativeHandle(ref, () => ({
        callback
    }));

    const callback = (element,moder) => {
        setElement(element)
        setId(element.id)
        setModer(moder)
    }
    return (
        <>
        <div  className={props.type && props.type === 'bpmn:Process' ? style.show : style.hide}>
            <Collapse items={[
                {
                    key: 1,
                    label: "常规",
                    children: (
                        <div>
                             <Row justify={"center"} align={"middle"}>
                                 <Col span={6}>流程id:</Col>
                                 <Col span={18}>
                                     <Input  value={id} placeholder="请输入流程名称" />
                                 </Col>
                             </Row>
                            <Row style={{marginTop:10}} justify={"center"} align={"middle"}>
                                <Col span={6}>流程描述:</Col>
                                <Col span={18}>
                                    <Input  placeholder="请输入流程描述" />
                                </Col>
                            </Row>
                        </div>
                    )
                },
                {
                    key: 2,
                    label: "描述文档",
                    children: (
                        <div>
                            <Row style={{marginTop:10}} justify={"center"} align={"middle"}>
                                <Col span={6}>文档:</Col>
                                <Col span={18}>
                                    <TextArea size={"middle"}  placeholder="文档" />
                                </Col>
                            </Row>
                        </div>
                    )
                },
            ]} ghost={true} defaultActiveKey={1}>
            </Collapse>

        </div>
        </>
    )



});



export default ProcessPropertiesPanel;
